<template>
  <div class="login">
   <h1 class="header">登录</h1>
 <van-form @submit="onSubmit">
  <van-field
    v-model="user"
    name="用户名"
    placeholder="用户名"
    :rules="[{ required: true, message: '请填写用户名' }]"
  />
  <van-field
    v-model="password"
    type="password"
    name="密码"
    placeholder="密码"
    :rules="[{ required: true, message: '请填写密码' }]"
  />
  <div class="fun">
    <p @click="register" class="register">注册账号</p>
    <p @click="forget" class="forget">忘记密码</p>
    
  </div>
  <div style="margin: 16px;">
    <van-button round block type="info" native-type="submit" style=" background:#FD4A25; color:white; border: 1px solid #FD4A25; ">
      提交
    </van-button>
  </div>
</van-form>  

  </div>
</template>
<script>

import {userlogin} from '@/api/user.ts';
import Vue from 'vue';
import { Form,Button,Field } from 'vant';
Vue.use(Field);
Vue.use(Form);
Vue.use(Button);

export default {
  data() {
    return {
      user: '',
      password: '',
    };
  },
  methods: {
    onSubmit(values) {
      console.log('submit', values);
      userlogin(this.user,this.password)
    },
    register(){
      this.$router.push({path:"/register"})
    },
    forget(){
      this.$router.push({path:"/forget"})
    }
  },

};


</script>
<style lang="scss">
  .login{
    width: 100%;
    height: 100%;
    font-size: 13px;
    .fun{
      width: 100%;
      height: .7rem;
      .register{
       float: left;
       margin-left: 10px;
       line-height: .7rem;
      }
      .forget{
          float: right; 
          margin-right: 10px;
          line-height: .7rem;
      }
  
    }
       .header{
      width: 100%;
      height: .9rem;
      font-size: 16px;
      text-align: center;
      line-height: .9rem;
    }
  }
 
</style>


